/*
* © 2010 Autodata Solutions Company. All Rights Reserved
* This source code is the confidential and proprietary information of Autodata Solutions Company.
* The user shall not, in whole or in part, copy, publish, disclose or make any use of this source code
* without the prior written consent of Autodata Solutions Company.
*/
Ext.ns('net.autodata.swatch');
(function () {
	
	/**
	 * @class Swatch
	 * @extends Ext.BoxComponent
	 * @namespace net.autodata.swatch
	 */
	var Swatch = Ext.extend(Ext.BoxComponent, {
		
		autoEl: {
			tag: 'span',
			cls: 'swatch',
			style: {
            	'display': 'inline-block',
            	'-moz-inline-box': 'inline-block'
            }
		},
		
		handleMouseEvents: true,
		
		shortDesc: undefined,
		description: undefined,
        rgb: undefined,
        
		constructor: function (cfg)
		{
			this.addEvents({
				'click': true,
				'mouseover': true,
				'mouseout': true,
				'mousedown': true,
				'select': true,
				'deselect': true
			});
			
			Ext.apply(this, cfg);
			this.initialConfig = cfg || {};
			
			Swatch.superclass.constructor.apply(this, arguments);
		},
		
		/**
		 * @private
		 */
		initSwatchEl: function (el)
		{
			this.mon(el, {
				scope: this,
				click: this.onClick
			});
			
			if (this.handleMouseEvents) {
	            this.mon(el, {
	                scope: this,
	                mouseover: this.onMouseOver,
	                mousedown: this.onMouseDown,
	                mouseout: this.onMouseOut
	               
	            });
	        }
		},
		
		/**
		 * @method setRGB
		 * @param {String} rgb RGB color string eg: 150, 150, 150
		 */
		setRGB: function (rgb)
		{
			this.rgb = rgb;
			this.updateRGB();
		},
		
		/**
		 * @param {Boolean} select
		 */
		setSelected: function (select)
        {
        	 this[select ? 'addClass' : 'removeClass']('swatch-selected');
        	 this.fireEvent(select ? 'select' : 'deselect', this); 
        },
		
		/**
		 * @private
		 */
		updateRGB: function ()
		{	
			if (!this.rendered || Ext.isEmpty(this.rgb)) {
				return;
			}
			
			this.el.setStyle({
				'background-color': String.format('rgb({0})', this.rgb)
			});
		},
		
		/**
		 * @private
		 */
		onRender: function ()
		{
			Swatch.superclass.onRender.apply(this, arguments);
			
			if (this.selected) {
				this.setSelected(this.selected);
			}
			
			this.initSwatchEl(this.el);
			this.updateRGB();
		},
		
		onMouseOver: function (e)
		{
			if (this.disabled) {
				return;
			}
			
			this.el.addClass('swatch-over');
			this.fireEvent('mouseover', this, e);
		},
		
		onMouseOut: function (e)
		{
			if (this.disabled) {
				return;
			}
			
			this.el.removeClass('swatch-over');
			this.fireEvent('mouseout', this, e);
		},
		
		onMouseDown: function (e)
		{
			if (this.disabled || e.button !== 0) {
				return;
			}
			
			this.el.addClass('swatch-click');
			this.el.on('mouseup', this.onMouseUp, this);
			this.fireEvent('mousedown', this, e);
		},
		
		onMouseUp: function (e)
		{
			if (this.disabled) {
				return;
			}
			
			this.el.removeClass('swatch-click');
			this.el.un('mouseup', this.onMouseUp, this);
		},
		
		onClick: function (e)
		{
			if (e) {
        		e.preventDefault();
        	}
        	
        	if (e.button !== 0) {
                return;
            }
        	
        	this.fireEvent('click', this, e);
        	if (this.handler) {
        		this.handler.call(this.scope || this, this, e);
        	} 
		}
	});
	
	net.autodata.swatch.Swatch = Swatch;
	
})();